<template>
    <div>
        <!-- 标题导航组件 -->
        <navtitle title="我的"></navtitle>

        <div style="width: 100%; height: 100%;">
            <div style="width: 100%; height: 200px; background-color: #f04864;">
                <div style="float: left;">
                    <img :src="store.piniaData.img" alt=""
                        style="width: 100px;height: 100px; margin-top: 40px;margin-left: 20px;border-radius: 50%;">
                </div>
                <div style="float: left;">
                    <p style="margin-top: 50px;color: #fff; margin-left: 19px; font-size: 20px;">{{ store.piniaData.name
                    }}</p>
                    <button
                        style="border: 1px solid #fff; border-radius: 20px;margin-left: 19px; color: #fff; background-color: #f04864;">{{
                            store.piniaData.vip
                        }}</button>
                </div>
                <div style="float: left; margin-top: 30px; margin-left: 30px; font-size: 20px; color: #fff;">
                    <p>关注</p>
                    <p>100</p>
                </div>
                <div style="float: left; margin-top: 30px; margin-left: 30px; font-size: 20px; color: #fff;">
                    <p>粉丝</p>
                    <p>100</p>
                </div>
            </div>

            <van-grid>
                <van-grid-item icon="photo-o" text="待付款" />
                <van-grid-item icon="photo-o" text="待发货" />
                <van-grid-item icon="photo-o" text="待收货" />
                <van-grid-item icon="photo-o" text="全部订单" />
                <van-grid-item icon="photo-o" text="退换/售后" />
                <van-grid-item icon="photo-o" text="评价" />
                <van-grid-item icon="photo-o" text="钱包" />
            </van-grid>
            <div style="height: 20px;"></div>
            <van-cell title="商城订单" is-link to="/myorder" />
            <van-cell title="优惠券" is-link to="index" />
            <van-cell title="邀请有礼" is-link to="index" />
            <van-cell title="我的关注" is-link to="index" />
            <van-cell title="我的收藏" is-link to="index" />
            <van-cell title="我的足迹" is-link to="index" />
            <van-cell title="服务中心" is-link to="index" />
            <van-cell title="地址管理" is-link to="index" />
            <van-cell title="意见反馈" is-link to="index" />
        </div>
    </div>
</template>

<script setup>
// 标题导航组件
import navtitle from '@/components/navtitle.vue';

// 引入pinia
import { useCounterStore } from '@/stores/user'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
console.log(store.piniaData);

</script>

<style lang="scss" scoped></style>